<div style="display: none">
    <div z-create-volume="winNewVolume" z-options="optionsCreateVolume"></div>
    <div z-search="search" z-options="optionsSearch"></div>
    <div z-confirm="deleteVolume" z-options="optionsDeleteVolume"></div>
    <div z-confirm="expungeVolume" z-options="optionsExpungeVolume"></div>
    <div z-volume-attach-vm="attachVm" z-options="optionsAttachVm"></div>
    <div z-volume-detach-vm="detachVm" z-options="optionsDetachVm"></div>
    <div z-backup-data-volume="backupDataVolumeWin" z-options="optionsBackupDataVolume"></div>
    <div z-volume-take-snapshot="takeSnapshot" z-options="optionsTakeSnapshot"></div>
    <div z-create-template-from-root-volume="createTemplateWin" z-options="optionsCreateTemplate"></div>
</div>

<div>
    <h3 class="z-h3">{{ "volume.volume.VOLUME" | translate }}</h3>
    <div class="btn-group-sm z-btn-bar">
        <button type="button" class="btn btn-default btn-sm" ng-click="funcRefresh()">
            <i class="fa fa-refresh"></i>
        </button>

        <button type="button" class="btn btn-default btn-sm" ng-click="funcSearch(search)">
            <i class="fa fa-search"></i>
        </button>

        <div z-sort-by z-options="optionsSortBy"></div>

        <button z-popover="popoverFilterBy" type="button" id="volumeFilter" z-content-id="volumeFilterContent" class="btn btn-default btn-sm" ng-click="filterBy.open(popoverFilterBy)">
            <i class="fa fa-filter"></i><span>&nbsp; {{filterBy.getButtonName()}}</span>
        </button>

        <button type="button" class="btn btn-success btn-sm" style="margin-left: 20px" ng-click="funcCreateVolume(winNewVolume)">
            <i class="fa fa-plus"></i>
            <span>&nbsp; {{ "volume.volume.New Volume" | translate }}</span>
        </button>

        <div id="volumeFilterContent" style="display: none">
            <form class="form">
                <div class="form-group">
                    <label for="fieldList" class="z-block-label">{{ "volume.volume.FILTER BY" | translate }}</label>
                    <select id="fieldList" kendo-drop-down-list k-options="filterBy.fieldList" ng-model="filterBy.field"></select>
                </div>
                <div class="form-group">
                    <label class="z-block-label" for="valueList">{{ "volume.volume.VALUE" | translate }}</label>
                    <select kendo-drop-down-list id="valueList" ng-disabled="filterBy.isValueListDisabled()" k-options="filterBy.valueList" ng-model="filterBy.value"></select>
                </div>
                <button type="button" class="btn btn-sm btn-primary" ng-click="filterBy.confirm(popoverFilterBy)">{{ "volume.volume.Confirm" | translate }}</button>
            </form>
        </div>

        <div class="btn-group" ng-show="funcIsActionShow()">
            <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" ng-disabled="funcIsActionDisabled()">
                {{ "volume.volume.Action" | translate }} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href ng-click="action.enable()" ng-show="model.current.isEnableShow()">{{ "volume.volume.Enable" | translate }}</a></li>
                <li><a href ng-click="action.disable()" ng-show="model.current.isDisableShow()">{{ "volume.volume.Disable" | translate }}</a></li>
                <li><a href ng-click="action.attach()" ng-show="model.current.isAttachShow()">{{ "volume.volume.Attach" | translate }}</a></li>
                <li><a href ng-click="action.detach()" ng-show="model.current.isDetachShow()">{{ "volume.volume.Detach" | translate }}</a></li>
                <li><a href ng-click="action.createTemplate()" ng-show="model.current.isCreateTemplateShow()">{{ "volume.volume.Create Template" | translate }}</a></li>
                <li><a href ng-click="action.takeSnapshot()" ng-show="model.current.isSnapshotShow()">{{ "volume.volume.Take Snapshot" | translate }}</a></li>
                <li><a href ng-click="action.recover()" ng-show="model.current.isRecoverShow()">{{ "volume.volume.Recover" | translate }}</a></li>
                <li class="divider"></li>
                <li><a href style="color:red" ng-click="funcDeleteVolume(deleteVolume)" ng-show="model.current.isDeleteShow()">{{ "volume.volume.Delete" | translate }}</a></li>
                <li><a href style="color:red" ng-click="funcExpungeVolume(expungeVolume)" ng-show="model.current.isExpungeShow()">{{ "volume.volume.Expunge" | translate }}</a></li>
            </ul>
        </div>
    </div>

    <div kendo-grid="volumeGrid" k-options="oVolumeGrid.options" z-grid-double-click="funcGridDoubleClick" class="z-flat-table"></div>
    <p class="z-hint">{{ "volume.volume.HINT1" | translate }}</p>
    <p class="z-hint">{{ "volume.volume.HINT2" | translate }}</p>
</div>
